<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0"> 
<title>Off-Canvas Menu Effects - Side Slide</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/chat.css" />

<!-- 对话框 -->
<link rel="stylesheet" type="text/css" href="css/dialog.css" />
<link rel="stylesheet" type="text/css" href="css/dialog-sandra.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/menu_sideslide.css" />
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
	<div class="menu-wrap">
		<nav class="menu">
			<div class="icon-list">
				<a href="#"><i class="fa fa-fw fa-star-o"></i><span>Article</span></a>
				<a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>Messages</span></a>
				<a href="#"><i class="fa fa-fw fa-comment-o"></i><span>Websocket</span></a>
				<a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span></a>
				<a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>Hello me</span></a>
			</div>
		</nav>
		<button class="close-button" id="close-button">Close Menu</button>
	</div>
	
	<button class="menu-button" id="open-button">Open Menu</button>

	<div class="content-wrap">
		<div class="header">
			<h1>快乐的潇洒哥</h1>
			<p>天地随心,一步从容.凤云任吾,百世逍遥</p>
		</div>
		<div class="container">
			<div class="widget-box">
				<div class="widget-header">
					<h4 class="widget-title lighter smaller">
						<i class="ace-icon fa fa-comment blue"></i>
						会话
					</h4>
				</div>

				<div class="widget-body">
					<div class="widget-main no-padding">
						<!-- #section:pages/dashboard.conversations -->
						<div class="dialogs">
							<div class="itemdiv dialogdiv">
								<div class="user">Alexa</div>

								<div class="body">
									<div class="time">
										<i class="ace-icon fa fa-clock-o"></i>
										<span class="green">10/01 23:56</span>
									</div>
									<div class="text">Bootstrap的所有JavaScript插件都依赖jQuery。</div>

									<div class="tools">
										<a href="#" class="btn btn-minier btn-info">
											<i class="icon-only ace-icon fa fa-share"></i>
										</a>
									</div>
								</div>
							</div>

							<div class="itemdiv dialogdiv">
								<div class="user">Johnaaaaaa</div>

								<div class="body">
									<div class="time">
										<i class="ace-icon fa fa-clock-o"></i>
										<span class="blue">10/02 23:56</span>
									</div>
									<div class="text">Bootstrap 会自动针对不同的屏幕尺寸调整页面，使其在各个尺寸的屏幕上表现良好。</div>

									<div class="tools">
										<a href="#" class="btn btn-minier btn-info">
											<i class="icon-only ace-icon fa fa-share"></i>
										</a>
									</div>
								</div>
							</div>

							<div class="itemdiv dialogdiv">
								<div class="user">Bob</div>

								<div class="body">
									<div class="time">
										<i class="ace-icon fa fa-clock-o"></i>
										<span class="orange">10/03 23:56</span>
									</div>

									<div class="text">在移动设备浏览器上，通过设置meta属性为 user-scalable=no可以禁用其缩放（zooming）功能。</div>

									<div class="tools">
										<a href="#" class="btn btn-minier btn-info">
											<i class="icon-only ace-icon fa fa-share"></i>
										</a>
									</div>
								</div>
							</div>

							<div class="itemdiv dialogdiv">
								<div class="user">Jim</div>

								<div class="body">
									<div class="time">
										<i class="ace-icon fa fa-clock-o"></i>
										<span class="grey">10/04 23:56</span>
									</div>
									<div class="text">IE8不支持CSS3中的圆角属性。</div>

									<div class="tools">
										<a href="#" class="btn btn-minier btn-info">
											<i class="icon-only ace-icon fa fa-share"></i>
										</a>
									</div>
								</div>
							</div>

							<div class="itemdiv dialogdiv">
								<div class="user">Alexa</div>

								<div class="body">
									<div class="time">
										<i class="ace-icon fa fa-clock-o"></i>
										<span class="green">10/04 23:56</span>
									</div>
									<div class="text">禁用缩放功能后，用户只能滚动屏幕，让网站更像原生应用。</div>

									<div class="tools">
										<a href="#" class="btn btn-minier btn-info">
											<i class="icon-only ace-icon fa fa-share"></i>
										</a>
									</div>
								</div>
							</div>
						</div>

						<!-- /section:pages/dashboard.conversations -->
						<form>
							<div class="form-actions">
								<div class="input-group">
									<input placeholder="在此输入消息 ..." type="text" class="form-control" name="message">
									<span class="input-group-btn">
										<button class="btn btn-sm btn-info no-radius" type="button">
											<i class="ace-icon fa fa-share"></i>
											发送
										</button>
									</span>
								</div>
							</div>
						</form>
						<div>
							当前状态:<small>匿名</small><button data-dialog="changeStatus" class="trigger">点击修改</button>
						</div>
						<div id="changeStatus" class="dialog">
							<div class="dialog__overlay"></div>
							<div class="dialog__content">
								<h2><strong>你的名字</strong>: <input type="text"></h2>
								<div>
									<button class="action">确定</button>
									<button class="action" data-dialog-close>取消</button>
								</div>
							</div>
						</div>
					</div><!-- /.widget-main -->
				</div><!-- /.widget-body -->
			</div>
		</div>
	</div>

<script src="js/jquery.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/main.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/dialogFx.js"></script>
<script>
	(function() {

		var dlgtrigger = document.querySelector( '[data-dialog]' ),
			somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
			dlg = new DialogFx( somedialog );

		dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );

	})();
</script>
</body>
</html>